<template>
    <div class="account_list">
        <div class="search">
            <el-form ref="searchForm" :inline="true" :model="searchForm" :rules="searchFormRules">
                <el-form-item :label="$t('common.accountName')" prop="collectionUserName"><!--账号名称-->
                    <select-account-list :type="selectDataType" v-model="searchForm.collectionUserName" :placeholder="$t('verify.plsInput')"></select-account-list>
                </el-form-item>
                <el-form-item :label="$t('common.roleType')" prop="roleType"><!--角色类型-->
                    <el-select v-model="searchForm.roleType" @change="roleTypeChange">
                        <el-option v-for="role in roleTypeList" :key="role.pid" :value="role.pid" :label="role.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="active" :label="$t('authority.accountStatus')">
                    <el-select v-model="searchForm.active" clearable :placeholder="$t('verify.plsChoose')" style="width: 100%"><!--账号状态-->
                        <el-option key="0" :label="$t('collection.activated')" :value="0"></el-option>
                        <el-option key="1" :label="$t('collection.closed')" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch" icon="search">{{ $t('common.search') }}</el-button>
                </el-form-item>
            </el-form><!--end form-->
        </div>

        <div class="data_list">
            <!--主管-->
            <div v-show="listRoleType === '129'" class="leader">
                <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                    <el-table-column align="left" :label="$t('common.serialNumber')" prop="collectionUserId"></el-table-column><!--序号-->
                    <el-table-column align="left" :label="$t('common.accountName')" prop="collectionUserName"><!--账号名称-->
                        <template slot-scope="scope">{{ scope.row.collectionUserName }}</template>
                    </el-table-column>
                    <el-table-column align="left" :label="$t('common.roleType')" prop="roleName"><!--角色类型-->
                        <template slot-scope="scope">{{ $t('authority.manager') }}</template>
                    </el-table-column>
                    <el-table-column align="left" :label="$t('authority.accountStatus')" prop="roleName"><!--账号状态-->
                        <template slot-scope="scope">{{ scope.row.active == '0' ? $t('common.enable') : $t('common.close')}}</template>
                    </el-table-column>
                    <!--<el-table-column align="left" :label="$t('common.operation')">&lt;!&ndash;操作&ndash;&gt;-->
                        <!--<template slot-scope="scope">-->
                            <!--<el-button @click="bindTelCenter(scope.row)" type="text">绑定呼叫中心</el-button>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                </el-table><!--end table-->
            </div>
            <!--组长-->
            <div v-show="listRoleType === '128'" class="leader">
                <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                    <el-table-column align="left" :label="$t('common.serialNumber')" prop="collectionUserId"></el-table-column><!--序号-->
                    <el-table-column align="left" :label="$t('common.accountName')" prop="collectionUserName"><!--账号名称-->
                        <template slot-scope="scope">{{ scope.row.collectionUserName }}</template>
                    </el-table-column>
                    <el-table-column align="left" :label="$t('common.roleType')" prop="roleName"><!--角色类型-->
                        <template slot-scope="scope">{{ $t('authority.colLeader') }}</template>
                    </el-table-column>

                    <el-table-column align="left" :label="$t('authority.accountStatus')" prop="roleName"><!--账号状态-->
                        <template slot-scope="scope">{{ scope.row.active == '0' ? $t('common.enable') : $t('common.close')}} </template>
                    </el-table-column>

                    <el-table-column align="left" prop="teamName" :label="$t('collection.colPhase')"><!--催收阶段--></el-table-column>
                    <!--<el-table-column align="left" :label="$t('authority.remainingOrder')" prop="overDueNoRepayCount"></el-table-column>&lt;!&ndash;剩余单量&ndash;&gt;-->
                    <!--<el-table-column align="left" :label="$t('authority.everydayLimit')" prop="stepNumber">&lt;!&ndash;每日进件上限&ndash;&gt;-->
                        <!--<template slot-scope="scope">-->
                            <!--<span @click="showSetNum(scope.row)"><i class="el-icon-edit"></i>{{ scope.row.stepNumber }}</span>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column :class-name="'show_column'" align="left" :label="$t('common.isAssignOrder')" prop="isCollect">&lt;!&ndash;是否进件&ndash;&gt;-->
                        <!--<template slot-scope="scope">-->
                            <!--<el-switch @change="changeStatus(scope.row)" v-model="scope.row.isCollect">{{ $t('common.isAssignOrder') }}</el-switch>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <el-table-column align="left" :label="$t('authority.doGroup')"><!--去分组-->
                        <template slot-scope="scope">
                            <el-button @click="showDoGroup(scope.row)" type="text" :disabled="scope.row.active == '1'">{{ $t('authority.doGroup') }}</el-button>
                        </template>
                    </el-table-column>
                    <!--<el-table-column align="left" :label="$t('common.operation')">-->
                        <!--<template slot-scope="scope">-->
                            <!--<el-button @click="bindTelCenter(scope.row)" type="text">绑定呼叫中心</el-button>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                </el-table><!--end table-->
            </div>
            <!--催收员-->
            <div v-show="listRoleType === '127'" class="collector">
                <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                    <el-table-column align="left" :label="$t('common.serialNumber')" prop="collectionUserId"></el-table-column><!--序号-->
                    <!--<el-table-column align="left" :label="$t('common.jobNumber')" prop="jobNumber"></el-table-column>&lt;!&ndash;工号&ndash;&gt;-->
                    <el-table-column align="left" :label="$t('common.accountName')" prop="collectionUserName"><!--账号名称-->
                        <template slot-scope="scope">
                            <a href="javascript:void(0);" @click="searchOrder(scope.row,'cs')" :disabled="scope.row.active == '1'">{{ scope.row.collectionUserName }}</a>
                        </template>
                    </el-table-column>
                    <el-table-column align="left" :label="$t('common.roleType')" prop="roleName"><!--角色类型-->
                        <template slot-scope="scope">{{ $t('authority.colMember') }}</template>
                    </el-table-column>

                    <el-table-column align="left" :label="$t('authority.accountStatus')" prop="roleName"><!--账号状态-->
                        <template slot-scope="scope">{{ scope.row.active == '0' ? $t('common.enable') : $t('common.close')}}</template>
                    </el-table-column>

                    <el-table-column align="left" prop="teamName" :label="$t('collection.colPhase')"><!--催收阶段--></el-table-column>
                    <el-table-column align="left" prop="teamSubId" :label="$t('authority.teamLeader')"></el-table-column><!--组长-->
                    <el-table-column align="left" :label="$t('authority.remainingOrder')" prop="overDueNoRepayCount"></el-table-column><!--剩余单量-->
                    <el-table-column align="left" :label="$t('authority.everydayLimit')" prop="stepNumber"><!--每日进件上限-->
                        <template slot-scope="scope">
                            <span @click="showSetNum(scope.row)"><i class="el-icon-edit"></i>{{ scope.row.stepNumber }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="allocationOrderSelectionShow" align="left" prop="bindAppName" :label="$t('common.chooseAssignOrder')"><!--分单选择-->
                        <template slot-scope="scope">
                            <el-button @click="chooseAssignOrder(scope.row)" type="text" :disabled="scope.row.active == '1'">
                                <p v-for="(item, index) in scope.row.bindAppNames" :key="index">{{item}}</p>
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column :class-name="'show_column'" align="left" :label="$t('common.isAssignOrder')" prop="isCollect"><!--是否进件-->
                        <template slot-scope="scope">
                            <el-switch @change="changeStatus(scope.row)" v-model="scope.row.isCollect" :disabled="scope.row.active == '1'">{{ $t('common.isAssignOrder') }}</el-switch>
                        </template>
                    </el-table-column><!--是否进件-->
                   
                    <el-table-column align="left" :label="$t('authority.doGroup')"><!--去分组-->
                        <template slot-scope="scope">
                            <el-button @click="showDoGroup(scope.row)" type="text" :disabled="scope.row.active == '1'">{{ $t('authority.doGroup') }}</el-button>
                        </template>
                    </el-table-column>
                    <!--<el-table-column align="left" :label="$t('common.operation')">-->
                        <!--<template slot-scope="scope">-->
                            <!--<el-button @click="bindTelCenter(scope.row)" type="text">绑定呼叫中心</el-button>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                </el-table><!--end table-->
            </div>
            <!--待分配人员-->
            <div v-show="listRoleType === '0'" class="no_role_type">
                <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                    <el-table-column align="left" :label="$t('common.serialNumber')" prop="collectionUserId"></el-table-column><!--序号-->
                    <el-table-column align="left" :label="$t('common.accountName')" prop="collectionUserName"><!--账号名称-->
                        <!--<template slot-scope="scope">-->
                        <!--<a href="javascript:void(0);" @click="searchOrder(scope.row)">{{ scope.row.collectionUserName }}</a>-->
                        <!--</template>-->
                    </el-table-column>
                    <el-table-column align="left" :label="$t('common.roleType')" prop="roleName"><!--角色类型-->
                        <template slot-scope="scope">{{ $t('tel.waitAssign') }}</template>
                    </el-table-column>

                    <el-table-column align="left" :label="$t('authority.accountStatus')" prop="roleName"><!--账号状态-->
                        <template slot-scope="scope">{{ scope.row.active == '0' ? $t('common.enable') : $t('common.close')}}</template>
                    </el-table-column>

                    <el-table-column align="left" :label="$t('common.operation')" prop="auditorCount">
                        <template slot-scope="scope">
                            <el-button @click="showDialog(scope.row)" type="text" :disabled="scope.row.active == '1'">{{ $t('authority.allotRole') }}</el-button><!--分配角色-->
                        </template>
                    </el-table-column>
                </el-table><!--end table-->
            </div>
            <!--预催收员-->
            <div v-show="listRoleType === '141'" class="preCollection">
                <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                    <el-table-column align="left" :label="$t('common.serialNumber')" prop="collectionUserId"></el-table-column><!--序号-->
                    <el-table-column align="left" :label="$t('common.accountName')" prop="collectionUserName">
                        <template slot-scope="scope">
                            <a href="javascript:void(0);" @click="searchOrder(scope.row,'yc')" :disabled="scope.row.active == '1'">{{ scope.row.collectionUserName }}</a>
                        </template>
                    </el-table-column><!--账号名称-->
                    <el-table-column align="left" :label="$t('common.roleType')" prop="roleName">
                        <template slot-scope="scope">{{ $t('authority.preCollector') }}</template>
                    </el-table-column><!--角色类型-->

                    <el-table-column align="left" :label="$t('authority.accountStatus')" prop="roleName"><!--账号状态-->
                        <template slot-scope="scope">{{ scope.row.active == '0' ? $t('common.enable') : $t('common.close')}}</template>
                    </el-table-column>

                    <el-table-column align="left" prop="teamName" :label="$t('collection.colPhase')"><!--催收阶段--></el-table-column>
                    <el-table-column align="left" prop="teamSubId" :label="$t('authority.teamLeader')"></el-table-column><!--组长-->
                    <el-table-column align="left" :label="$t('authority.remainingOrder')" prop="overDueNoRepayCount"></el-table-column><!--剩余单量-->
                    <el-table-column align="left" :label="$t('authority.everydayLimit')" prop="stepNumber"><!--每日进件上限-->
                        <template slot-scope="scope">
                            <span @click="showSetNum(scope.row)"><i class="el-icon-edit"></i>{{ scope.row.stepNumber }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="allocationOrderSelectionShow" align="left" prop="bindAppName" :label="$t('common.chooseAssignOrder')"><!--分单选择-->
                        <template slot-scope="scope">
                            <el-button @click="chooseAssignOrder(scope.row)" type="text" :disabled="scope.row.active == '1'">
                                <p v-for="(item, index) in scope.row.bindAppNames" :key="index">{{item}}</p>
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column :class-name="'show_column'" align="left" :label="$t('common.isAssignOrder')" prop="isCollect"><!--是否进件-->
                        <template slot-scope="scope">
                            <el-switch @change="changeStatus(scope.row)" v-model="scope.row.isCollect" :disabled="scope.row.active == '1'">{{ $t('common.isAssignOrder') }}</el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column :class-name="'show_column'" align="left" :label="$t('common.isVacation')" prop="workFlag"><!--是否休假中-->
                        <template slot-scope="scope">
                            <el-switch
                                v-model="scope.row.workFlag"
                                :active-value="0"
                                :inactive-value="1"
                                @change="changeVacation(scope.row)" 
                                >
                            </el-switch>
                        </template>
                    </el-table-column><!--是否进件-->
                    <el-table-column align="left" :label="$t('authority.doGroup')"><!--去分组-->
                        <template slot-scope="scope">
                            <el-button @click="showDoGroup(scope.row)" type="text" :disabled="scope.row.active == '0'">{{ $t('authority.doGroup') }}</el-button>
                        </template>
                    </el-table-column>
                    <!--<el-table-column align="left" :label="$t('common.operation')">-->
                        <!--<template slot-scope="scope">-->
                            <!--<el-button @click="bindTelCenter(scope.row)" type="text">绑定呼叫中心</el-button>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                </el-table>
            </div>

            <!--预催收组长-->
            <div v-show="listRoleType === '140'" class="preCollection">
                <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                    <el-table-column align="left" :label="$t('common.serialNumber')" prop="collectionUserId"></el-table-column><!--序号-->
                    <el-table-column align="left" :label="$t('common.accountName')" prop="collectionUserName"></el-table-column><!--账号名称-->
                    <el-table-column align="left" :label="$t('common.roleType')" prop="roleName">
                        <template slot-scope="scope">{{ $t('authority.preColLeader') }}</template>
                    </el-table-column><!--角色类型-->
                    <el-table-column align="left" :label="$t('authority.accountStatus')" prop="roleName"><!--账号状态-->
                        <template slot-scope="scope">{{ scope.row.active == '0' ? $t('common.enable') : $t('common.close')}}</template>
                    </el-table-column>
                    <el-table-column align="left" prop="teamName" :label="$t('collection.colPhase')"><!--催收阶段--></el-table-column>
                    <!--<el-table-column align="left" :label="$t('authority.remainingOrder')" prop="overDueNoRepayCount"></el-table-column>&lt;!&ndash;剩余单量&ndash;&gt;-->
                    <!--<el-table-column align="left" :label="$t('authority.everydayLimit')" prop="stepNumber">&lt;!&ndash;每日进件上限&ndash;&gt;-->
                        <!--<template slot-scope="scope">-->
                            <!--<span @click="showSetNum(scope.row)"><i class="el-icon-edit"></i>{{ scope.row.stepNumber }}</span>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column :class-name="'show_column'" align="left" :label="$t('common.isAssignOrder')" prop="isCollect">&lt;!&ndash;是否进件&ndash;&gt;-->
                        <!--<template slot-scope="scope">-->
                            <!--<el-switch @change="changeStatus(scope.row)" v-model="scope.row.isCollect">{{ $t('common.isAssignOrder') }}</el-switch>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                </el-table>
            </div>
        </div>

        <pagination @pageChange="pageChange" :page="page">分页组件</pagination>

        <!--催收员催收组长分组-->
        <alert-dialog :title="$t('authority.doGroup')" width="416px" :visible.sync="showCollectionGroup" :dialogPosition="'center'"><!--分组-->
            <el-form ref="setGroupForm" :model="setGroupForm" :rules="setGroupFormRules" label-position="top">
                <el-form-item :label="$t('common.accountName')"><!--账号名称-->
                    <el-input :disabled="true" v-model="setGroupForm.name" type="text" :placeholder="$t('common.accountName')"></el-input>
                </el-form-item>
                <el-form-item prop="teamId" :label="$t('collection.colPhase')"><!--催收阶段-->
                    <el-select v-if="listRoleType === '127' || listRoleType === '128'" v-model="setGroupForm.teamId" @change="getGroupLeader" style="width: 100%;">
                        <el-option v-for="item in phaseData" v-if="item.name !== 'S0'" :key="item.id" :value="item.id" :label="item.name"></el-option>
                    </el-select>
                    <el-select v-if="listRoleType === '140' || listRoleType === '141'" v-model="setGroupForm.teamId" :disabled="true" @change="getPreGroupLeader" style="width: 100%;">
                        <el-option :value="s0Id" label="S0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="listRoleType === '127' || listRoleType === '141'" :label="$t('authority.leader')" prop="teamSubId"><!--组长-->
                    <el-select v-model="setGroupForm.teamSubId" style="width: 100%;">
                        <el-option v-for="(item, $index) in groupList" :key="$index" :value="item.collectionUserName" :label="item.collectionUserName"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="showCollectionGroup = false;setGroupForm.teamId = ''" type="default">{{ $t('common.cancel') }}</el-button>
                <el-button @click="setGroup" type="primary">{{ $t('common.submit') }}</el-button>
            </div>
        </alert-dialog>

        <!--设置每日进件上限-->
        <alert-dialog :title="$t('authority.setEverydayUpperCase')" :visible.sync="showNumDialog" width="416px" :dialogPosition="'center'"><!--设置每日进件上限-->
            <el-form ref="form" :model="form" :rules="rules" label-position="top">
                <el-form-item :label="$t('authority.everydayLimit')" prop="maxNum"><!--每日进件上限-->
                    <el-input v-model="form.maxNum" type="text" :placeholder="$t('authority.everydayLimit')"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="showNumDialog = false" type="default">{{ $t('common.cancel') }}</el-button>
                <el-button @click="setNum" type="primary">{{ $t('common.submit') }}</el-button>
            </div>
        </alert-dialog><!--设置每日进件上限end-->

        <!--分配角色start-->
        <alert-dialog :title="$t('authority.allotRole')" :visible.sync="setRoleTypeDialog" width="416px" :dialogPosition="'center'">
            <el-form ref="setRoleTypeForm" :model="setRoleTypeForm" :rules="setRoleTypeFormRules" label-position="top">
                <el-form-item :label="$t('common.accountName')"><!--账号名称-->
                    <el-input :disabled="true" v-model="setRoleTypeForm.name" type="text" :placeholder="$t('common.accountName')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('common.assignRole')" prop="roleType"><!--分配角色-->
                    <el-select v-model="setRoleTypeForm.roleType" @change="handleTeamChange('role')" style="width: 100%;">
                        <el-option v-for="role in roleTypeList" :key="role.pid" :value="role.pid" :label="role.value" v-if="role.pid !=='0'"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('collection.colPhase')" v-if="setRoleTypeForm.roleType === '128' || setRoleTypeForm.roleType === '127' || setRoleTypeForm.roleType === '140' || setRoleTypeForm.roleType === '141'" prop="teamId"><!--催收阶段-->
                    <el-select v-if="setRoleTypeForm.roleType === '128' || setRoleTypeForm.roleType === '127'" v-model="setRoleTypeForm.teamId" @change="handleTeamChange" style="width: 100%;">
                        <el-option v-for="item in phaseData" v-if="item.name !== 'S0'" :key="item.id" :value="item.id" :label="item.name"></el-option>
                    </el-select>
                    <el-select v-if="setRoleTypeForm.roleType === '140' || setRoleTypeForm.roleType === '141'" v-model="setRoleTypeForm.teamId" :disabled="true" style="width: 100%;">
                        <el-option :value="s0Id" label="S0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('authority.leader')"  v-if="(setRoleTypeForm.roleType === '127' || setRoleTypeForm.roleType === '141') && setRoleTypeForm.teamId" prop="teamSubId"><!--组长-->
                    <!--分组-->
                    <el-select v-model="setRoleTypeForm.teamSubId" style="width: 100%;">
                        <el-option v-for="(item, $index) in groupList" :key="$index" :value="item.collectionUserName" :label="item.collectionUserName"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="setRoleTypeDialog = false" type="default">{{ $t('common.cancel') }}</el-button>
                <el-button @click="setRoleType" type="primary">{{ $t('common.submit') }}</el-button>
            </div>
        </alert-dialog><!--分配角色end-->

        <!--分单选择弹框-->
        <el-dialog :visible.sync="showChooseAssignOrderDialog" width="416px" :title="$t('common.chooseAssignOrder')">
            <el-form ref="chooseAssignOrderForm" :model="chooseAssignOrderForm" :rules="chooseAssignOrderRules" label-position="top">
                 <el-form-item prop="bindAppNames"><!--每日进件上限-->
                    <select-app-list v-model="chooseAssignOrderForm.bindAppNames" multiple :placeholder="$t('system.appName')" :clearable='false'></select-app-list><!--app名称-->
                </el-form-item>
             </el-form>
            <div slot="footer">
                <el-button @click="submitChooseAssignOrder" type="primary">{{$t('common.confirmOk')}}</el-button>
                <el-button @click="showChooseAssignOrderDialog = false" type="default">{{$t('common.cancel')}}</el-button>
            </div>
        </el-dialog>
        <!--分单选择弹框end-->
    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import AlertDialog from '@/components/alert-dialog';
    import SelectAppList from '@/components/select-app-list';
    import SelectAccountList from '@/components/select-account-list';

    let that = null;
    export default {
        name: 'accountList',
        components: {
            Pagination,
            AlertDialog,
            SelectAppList,
            SelectAccountList
        },
        mixins: [mixin],
        props: {
            activeTab: {
                type: String,
                required: true
            },
        },
        data() {
            return {
                changeFlag: false,
                user: this.$storage.get('user'),
                isCaptain: false,
                form: {
                    accountId: '',
                    maxNum: '',
                    isCollect: '',
                    collectionUserId: '',
                    collectionUserName: '',
                },
                showNumDialog: false,
                rules: {
                    maxNum: [
                        {required: true, message: this.$t('authority.setEverydayUpperCase'), trigger: 'blur'},
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputInteger'), trigger: 'blur'}
                    ]
                },
                showSetGroupDialog: false,
                searchForm: {
                    collectionUserName: '',
                    roleType: '',
                    active: '',
                    teamSubId: '',
                    teamId: ''
                },
                searchFormRules: {
                    collectionUserName: [],
                    roleType: []
                },
                roleTypeList: [{
                    value: '管理员',
                    pid: '129'
                }, {
                    value: '催收组长',
                    pid: '128'
                }, {
                    value: '普通催收员',
                    pid: '127'
                }, {
                    value: '待分配',
                    pid: '0'
                }],
                setRoleTypeDialog: false,
                setRoleTypeForm: {
                    id: '',
                    name: '',
                    roleType: '',
                    isCollect: '',
                    stepNumber: '',
                    teamId: '', // 逾期阶段
                    teamSubId: '' // 催收员分组
                },
                // 催收员分组
                setGroupForm: {
                    teamId: '',
                    roleCode: '',
                    collectionUserId: '',
                    isCollect: '',
                    stepNumber: '',
                    teamSubId: '',
                },
                setGroupFormRules: {
                    teamId: [
                        {required: true, message: this.$t('verify.plsChoose')},
                    ],
                    teamSubId: [
                        {required: true, message: this.$t('verify.plsChoose')},
                    ]
                },
                setRoleTypeFormRules: {
                    id: [],
                    name: [],
                    roleType: [
                        {required: true, message: this.$t('verify.plsChoose')},
                    ],
                    teamId: [
                        {required: true, message: this.$t('verify.plsChoose')},
                    ],
                    teamSubId: [
                        {required: true, message: this.$t('verify.plsChoose')},
                    ]
                },
                listRoleType: '',
                valueList: [{
                    teamId: 'S1',
                }, {
                    teamId: 'S2',
                }, {
                    teamId: 'S3',
                }, {
                    teamId: 'M2',
                }, {
                    teamId: 'M3',
                }, {
                    teamId: 'M3+',
                }], // 组名
                showCollectionGroup: false,
                groupList: [], // 催收员分组
                accountForm: {
                    collectionUserName: '',
                },
                accountRules: {
                    userName: [
                        {required: true, message: this.$t('verify.plsInput'), trigger: 'blur'}
                    ],
                },
                companyId: '',
                preAccountForm: {
                    collectionUserName: '',
                },
                preAccountRules: {
                    userName: [
                        {required: true, message: this.$t('verify.plsInput'), trigger: 'blur'}
                    ],
                },
                overdueDays: '',
                phaseData: [],
                s0Id:'',
                showChooseAssignOrderDialog: false,
                chooseAssignOrderForm: {
                    bindAppNames: [],
                    collectionUserId: '',
                    collectionUserName: ''
                },
                chooseAssignOrderRules: {
                    bindAppNames: [
                        {required: true, message: this.$t('verify.plsChoose')},
                    ],
                }
            };
        },
        computed: {
            allocationOrderSelectionShow() {
                // 检查分单选择字段展示权限
                return this.$store.getters.checkUserAuthority('/collection/authority-manage/allocation-order-selection');
            },
            selectDataType() {
                return {
                    systemType: 'collection',
                    roleCode: this.listRoleType
                }
            }
        },
        watch: {
            activeTab(val) {
                if ('accountList' === val) {
                    this.page.currentPage = 1;
                    this.getTableData();
                }
            },
            'setGroupForm.teamId': function(n,o) {
                if(o && o !== '') {
                    this.setGroupForm.teamSubId = '';
                }
            },
        },
        methods: {
            changeVacation(e){
                let params = {
                    collectionUserName:e.collectionUserName,
                    workFlag:e.workFlag,
                    collectionUserId:e.collectionUserId,
                }
                this.$api.authorityManage.updateYcsWorkFlag(params).then((res)=>{
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error ) {
                       this.$message.success('Change Vacation State Success')
                    }else{
                      this.getTableData()  
                    }
                })
            },
            getTableData(page = this.page, form = this.searchForm) {
                const params = {
                    isPage: 1,
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    },
                    roleCode: form.roleType, // 角色类型
                    collectionUserName: form.collectionUserName, // 账号类型
                    active: form.active, // 账号状态
                };
                this.tableData = [];
                this.$api.authorityManage.queryCollectorsNew(params).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        if (data.resultData && data.resultData.length === 0 && data.page.totalRecord > 0 && this.page.currentPage > 1) {
                            this.page.currentPage--;
                            this.getTableData();
                            return;
                        }
                        this.tableData = data.resultData;
                        this.tableData.forEach((item) => {
                            item.isCollect = +item.isCollect === 1;
                        });
                        this.listRoleType = this.searchForm.roleType;
                        this.setPage(data.page, this.page);
                        this.tableMaxHeight = window.document.body.clientHeight - 180;
                    }
                });
            },
            showDoGroup(row) {
                let arr = this.phaseData.filter( item => {//此处是为了如果催收阶段关闭后弹窗展示问题
                    return item.id === Number(row.teamId)
                });
                this.showCollectionGroup = true;
                this.setGroupForm.name = row.collectionUserName;
                this.setGroupForm.teamId = (arr && arr.length >= 1) ? Number(row.teamId) : '';
                this.setGroupForm.roleCode = row.roleCode;
                this.setGroupForm.stepNumber = row.stepNumber;
                this.setGroupForm.isCollect = +row.isCollect;
                this.setGroupForm.collectionUserId = row.collectionUserId;
                this.setGroupForm.teamSubId = (arr && arr.length >= 1) ? row.teamSubId : '';
                this.setGroupForm.companyId = row.companyId;
                this.companyId = row.companyId;
                this.groupList = [];
                if (row.roleCode === '127' && row.teamId) {
                    // 如果是组员并且已经选择了催收阶段，查询对应的组长
                    this.getGroupLeader(row.teamId);
                }
                if (row.roleCode === '141') {
                    // 如果是组员并且已经选择了催收阶段，查询对应的组长
                    this.getPreGroupLeader();
                }
                this.$nextTick(() => {
                    // this.$refs.setGroupForm.resetFields();
                    this.$refs.setGroupForm.clearValidate();
                });
            },
            // 去分组setGroup
            setGroup() {
                this.$refs.setGroupForm.validate((val) => {
                    if (val) {
                        const params = {
                            roleCode: this.setGroupForm.roleCode,
                            collectionUserId: this.setGroupForm.collectionUserId,
                            teamId: this.setGroupForm.teamId,
                            teamSubId: this.setGroupForm.teamSubId,
                        };
                        this.$api.authorityManage.updateCollector(params).then((res) => {
                            const {status, error} = res;
                            if ('1' === status && '00000000' === error) {
                                this.$message.success(this.$t('common.successfulOperation'));
                                this.showCollectionGroup = false;
                                this.getTableData();
                            }
                        });
                    }
                });
            },
            // 是否进件
            changeStatus(row) {
                if (row.roleCode != '141') {
                    const params = {
                        roleCode: row.roleCode,
                        stepNumber: row.stepNumber,
                        isCollect: +row.isCollect,
                        collectionUserId: row.collectionUserId
                    };
                    this.$api.authorityManage.updateCollectorInfo(params).then((res) => {
                        const {status, error} = res;
                        if ('1' === status && '00000000' === error) {
                            this.$message.success(this.$t('common.successfulOperation'));
                        }
                        this.getTableData();
                    });
                }
                else {
                    const params = {
                        collectionUserName: row.collectionUserName,
                        stepNumber: row.stepNumber,
                        isCollect: +row.isCollect,
                        collectionUserId: row.collectionUserId
                    };
                    this.$api.authorityManage.updateYcs(params).then((res) => {
                        const {status, error} = res;
                        if ('1' === status && '00000000' === error) {
                            this.showNumDialog = false;
                            this.$message.success(this.$t('common.successfulOperation'));
                        }
                        this.getTableData();
                    });
                }
            },
            showSetNum(row) {
                this.form.accountId = row.roleCode;
                this.form.maxNum = row.stepNumber;
                this.form.isCollect = +row.isCollect;
                this.form.collectionUserId = row.collectionUserId;
                this.form.collectionUserName = row.collectionUserName;
                this.showNumDialog = true;
            },
            setNum() {
                this.$refs.form.validate((val) => {
                    if (val) {
                        if (this.listRoleType != '141') {
                            const params = {
                                roleCode: this.form.accountId,
                                stepNumber: this.form.maxNum,
                                isCollect: this.form.isCollect,
                                collectionUserId: this.form.collectionUserId
                            };
                            this.$api.authorityManage.updateCollectorInfo(params).then((res) => {
                                const {status, error} = res;
                                if ('1' === status && '00000000' === error) {
                                    this.showNumDialog = false;
                                    this.$message.success(this.$t('common.successfulOperation'));
                                }
                                this.getTableData();
                            });
                        }
                        else {
                            const params = {
                                collectionUserName: this.form.collectionUserName,
                                stepNumber: this.form.maxNum,
                                isCollect: this.form.isCollect,
                                collectionUserId: this.form.collectionUserId
                            };
                            this.$api.authorityManage.updateYcs(params).then((res) => {
                                const {status, error} = res;
                                if ('1' === status && '00000000' === error) {
                                    this.showNumDialog = false;
                                    this.$message.success(this.$t('common.successfulOperation'));
                                }
                                this.getTableData();
                            });
                        }
                    }
                });
            },
            searchOrder(row,type) {
                let path = (type === 'cs') ? 'orderList' : 'preOrderList';
                this.$emit('searchOrder', {accountId: row.collectionUserId}, path);
            },
            onSearch() {
                this.getTableData();
            },
            roleTypeChange() {
                this.searchForm.collectionUserName = '';
                this.searchForm.active = '';
                this.page.currentPage = 1;
                this.getTableData();
            },
            getRoleTypeList() {
                const params = {
                    type: 5,
                };
                this.$api.collection.getDicts(params).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.roleTypeList = data;
                        if (this.roleTypeList.length > 0) {
                            if (!this.searchForm.roleType) {
                                this.searchForm.roleType = this.roleTypeList[1].pid;
                            }
                            this.getTableData();
                        }
                    }
                });
            },
            // 待分配去分配
            setRoleType() {
                this.$refs.setRoleTypeForm.validate((val) => {
                    if (val) {
                        const form = this.setRoleTypeForm;
                        const params = {
                            roleCode: form.roleType,
                            stepNumber: form.stepNumber,
                            isCollect: +form.isCollect,
                            collectionUserId: form.id,
                            teamId: form.teamId, // 逾期阶段
                            teamSubId: form.teamSubId, // 催收员分组
                        };
                        this.$api.authorityManage.changeCollector(params).then((res) => {
                            const {status, error} = res;
                            if ('1' === status && '00000000' === error) {
                                this.setRoleTypeDialog = false;
                                this.$message.success(this.$t('common.successfulOperation'));
                                this.getTableData();
                            }
                        });
                    }
                });
            },
            showDialog(row) {
                this.setRoleTypeForm.id = row.collectionUserId;
                this.setRoleTypeForm.isCollect = row.isCollect;
                this.setRoleTypeForm.stepNumber = row.stepNumber;
                this.setRoleTypeForm.name = row.collectionUserName;
                this.setRoleTypeForm.companyId = row.companyId;
                this.companyId = row.companyId;
                this.setRoleTypeForm.roleType = '';
                this.setRoleTypeDialog = true;
            },
            // 选择催收阶段
            handleTeamChange(type) {
                this.setRoleTypeForm.teamSubId = '';
                if(type === 'role' && (this.setRoleTypeForm.roleType === '127' || this.setRoleTypeForm.roleType === '128')) {
                    this.setRoleTypeForm.teamId = '';
                }
                if (this.setRoleTypeForm.roleType === '127') {// 如果是组员
                    this.getGroupLeader(this.setRoleTypeForm.teamId);
                }
                else if(this.setRoleTypeForm.roleType === '140' || this.setRoleTypeForm.roleType === '141'){// 预催收员、预催收组长
                    this.setRoleTypeForm.teamId = this.s0Id;
                    if(this.setRoleTypeForm.roleType === '141') {// 预催收员
                        this.getPreGroupLeader();
                    }

                }
            },
            getGroupLeader(teamId) {
                console.log(this.listRoleType);// 这里要判断是0，127，141三种情况
//                if (this.changeFlag) {
//                    this.setGroupForm.teamSubId = '';
//                } else {
//                    this.changeFlag = true;
//                }
                const params = {
                    teamId,
                    companyId: this.companyId,
                    roleCode: '128',
                    isPage: 1,
                    page: {
                        pageNo: 1,
                        pageSize: 10000
                    },
                };
                this.$api.authorityManage.queryCollectorsNew(params).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error) {
                        this.groupList = data.resultData;
                    }
                });
            },
            // 获取预催分组
            getPreGroupLeader() {
//                if (this.changeFlag) {
//                    this.setGroupForm.teamSubId = '';
//                } else {
//                    this.changeFlag = true;
//                }
                const params = {
                    companyId: this.companyId,
                    roleCode: '140',
                    isPage: 1,
                    page: {
                        pageNo: 1,
                        pageSize: 10000
                    },
                };
                this.$api.authorityManage.queryCollectorsNew(params).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error) {
                        this.groupList = data.resultData;
                    }
                });
            },
            // 获取催收阶段数据
            getPhaseData() {
                const params = {
                    name: '',
                    active: 0
                };
                this.$api.collection.getCollectStages(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.phaseData = data.filter( item => {
                            return item.isUse === 0;
                        });
                        let s0Obj = data.filter( item => {
                            return item.name === 'S0';
                        });
                        if(s0Obj && s0Obj.length >= 1) this.s0Id = s0Obj[0].id;
                    }
                });
            },
            //分单选择更改弹框
            chooseAssignOrder(row) {
                this.chooseAssignOrderForm.bindAppNames = row.bindAppNames;
                this.chooseAssignOrderForm.collectionUserId = row.collectionUserId;
                this.chooseAssignOrderForm.collectionUserName = row.collectionUserName;
                this.showChooseAssignOrderDialog = true;
                this.$nextTick( () => {
                    this.$refs.chooseAssignOrderForm.clearValidate();
                });
            },
            submitChooseAssignOrder() {
                this.$refs.chooseAssignOrderForm.validate(val => {
                    if (val) {
                        const params = [];
                        this.chooseAssignOrderForm.bindAppNames.forEach(item=> {
                            params.push({
                                collectionUserId: this.chooseAssignOrderForm.collectionUserId,
                                collectionUserName: this.chooseAssignOrderForm.collectionUserName,
                                bindAppName: item
                            })
                        })
                        this.$api.authorityManage.saveclsplitconfigCS(params).then((res) => {
                            const {status, error} = res;
                            if ('1' === status && '00000000' === error) {
                                this.$message.success(this.$t('common.successfulOperation'));
                                this.getTableData();
                                this.showChooseAssignOrderDialog = false;
                            }
                        });
                    }
                });
            },
            
            
            
            
            
            
            
            
            
            // 判断当前登录用户的角色
            // getNowUserType() {
            //     const params = {
            //         isPage: 1,
            //         page: {
            //             pageNo: 1,
            //             pageSize: 100
            //         },
            //         roleCode: '',
            //         collectionUserName: this.user.username
            //     };
            //     this.$api.authorityManage.queryCollectorsNew(params).then((res) => {
            //         const { status, data, error } = res;
            //         if ('1' === status && '00000000' === error && data.resultData) {
            //             if (data.resultData[0].roleCode === '129') { //主管
            //                 this.searchForm.roleType = '129';
            //                 this.getTableData();
            //             }else if(data.resultData[0].roleCode === '128') { // 催收组长
            //                 this.isCaptain = true;
            //                 this.searchForm.roleType = '127';
            //                 this.searchForm.teamSubId = data.resultData[0].collectionUserName
            //                 this.searchForm.teamId = data.resultData[0].teamId
            //                 this.getTableData();
            //             }else if(data.resultData[0].roleCode === '140') { //预催收组长
            //                 this.isCaptain = true;
            //                 this.searchForm.roleType = '141';
            //                 this.searchForm.teamSubId = data.resultData[0].teamSubId
            //                 this.searchForm.teamId = data.resultData[0].teamId
            //                 this.getTableData();
            //             }
            //         }
            //     });
            // }
        },
        filters: {
            switchTeamid(id) {
                switch (id + '') {
                    case '1':
                        return 'S0';
                    case '2':
                        return 'S1';
                    case '3':
                        return 'S2';
                    case '4':
                        return 'S3';
                    case '5':
                        return 'M2';
                    case '6':
                        return 'M3';
                    case '7':
                        return 'M3+';
                    default:
                        return id;
                }
            }
        },
        created() {
            that = this;
            if (this.activeTab === 'accountList') {
                this.getRoleTypeList();
                this.getPhaseData();
            }
        },
        mounted() {
        },
    };
</script>

<style lang="scss" scoped>
    .data_list {
        background-color: #fff;
        padding: 10px 16px;
        margin: 16px 24px;
    }

    .inputPhone {
        width: 265px;
    }

    .search {
        background-color: #fff;
        padding: 22px 40px 0;
    }
</style>
